// 函数组件
import React, { useState, useEffect } from 'react';
import { Button, Modal, Form, Input, Switch } from 'antd';
import "../../goods/css/TagDialog.less"
import { updateByStatus } from "../../../../api/lys"
// 表格泛型
interface PropsType {
    isModalOpen: boolean
    modStuInfo?: DataType | undefined
    type: string
    close(): void
}

// 数据类型
interface DataType {
    order: number,
    tag: string,
    position: number;
    shelf: number;
}

// 表单布局
const layout = {
    labelCol: {
        span: 5,
    },
    wrapperCol: {
        span: 16,
    },
};

// 表单验证
const validateMessages = {
    required: '${label}必填',
    types: {
        number: '${label}必须是数值',
    },
    number: {
        range: '${label}  ${min} 到 ${max} 位',
    },
};


function TagDialog(props: any) {
    const [form] = Form.useForm();
    const [title, setTitle] = useState<string>('')
    const [delchecked, setDelChecked] = useState<boolean>()
    const { selectedRow, page, pageSize } = props
    useEffect(() => {
        console.log("1111",props);
        
        if (props.type == 'add') {
            setTitle('添加标签')
            form.resetFields()
            form.setFieldsValue({
                order: '',
                tag: '',
                position: '',
                shelf: false,
            })

        } else if (props.type == 'mod') {
            setTitle('编辑标签')
            //设置字段默认值
            form.setFieldsValue({
                order: props.modStuInfo?.order,
                tag: props.modStuInfo?.tag,
                position: props.modStuInfo?.position,
                shelf: props.modStuInfo?.shelf == 0 ? false : true,
            })
        }
    }, [props])



    // 2、点击提交
    const onFinish = async () => {
        let res = await updateByStatus({
            "ids": selectedRow,
            "status": `${delchecked ? "4" : "5"}`
        })
        console.log("res",res);
        
        if (res.code == "200") {
            console.log(res.msg);
            await props.goodsList({
                "limit": pageSize,
                "page": page
            })
            props.close()
        }

    };

    // 点击表单取消
    const cancel = () => {
        props.close()
    }
    // 点击叉叉取消
    const handleCancel = () => {
        props.close()
    };


    // 开关改变
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
        setDelChecked(checked)
    };

    return (
        <div className='Dialog'>
            <Modal centered={true} forceRender width={560} title={title} open={props.isModalOpen} footer={null} onCancel={handleCancel} >
                <Form
                    {...layout}
                    name="tag-form"
                    onFinish={onFinish}
                    validateMessages={validateMessages}
                    form={form}
                >

                    <Form.Item
                        name='shelf'
                        label="状态"
                        valuePropName='checked'
                        initialValue={props.modStuInfo?.shelf}
                    >
                        <Switch onChange={onChange} />
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            ...layout.wrapperCol,
                            offset: 8,
                        }}
                    >
                        <Button type="primary" htmlType="submit" className='confirm-btn' >确定</Button>
                        <Button type="primary" onClick={cancel} ghost>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default TagDialog